import Footer from '@/components/Footer';
import { SYSTEM_LOGO } from '@/constants';
import { userRegisterUsingPost,userRegisterEmailPost } from '@/services/backend/userController';
import { LockOutlined, UserOutlined, MailOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-form';
// import { Captcha } from 'aj-captcha-react';
import { message, Tabs, Form, Input, Button,Col,Row  } from 'antd';
import React, { useRef, useState } from 'react';
import { history } from 'umi';
import styles from './index.less';

const Register: React.FC = () => {
  const [type, setType] = useState<string>('account');
  const [valueData, setValueData] = useState<API.UserRegisterRequest>({
    userEmail: ''
  });
  //发送验证码
  const handleEmail = async () => {
    const res = await userRegisterEmailPost({
      userEmail:valueData.userEmail
    })
    if(res.code === 200){
      message.success(res.message);
    }
  }
  
  // 表单提交
  const handleSubmit = async (values: API.UserRegisterRequest) => {
    console.log(values)
    const { userPassword, checkPassword } = values;
    try {
      // 注册
      const data = await userRegisterUsingPost(values);
      if (data.code === 200) {
        const defaultLoginSuccessMessage = '注册成功！';
        message.success(defaultLoginSuccessMessage);

        history.push({
          pathname: '/user/login',
        });
      }
    } catch (error: any) {
    }
  };


  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <LoginForm
          submitter={{
            searchConfig: {
              submitText: '注册',
            },
          }}
          logo={<img alt="logo" src={SYSTEM_LOGO} />}
          title="短链云"
          initialValues={{
            autoLogin: true,
          }}
         onFinish={async (values) => {
            // click();
            setValueData(values);
            handleSubmit(values)
          }}
        >
          <Tabs activeKey={type} onChange={setType} centered>
            <Tabs.TabPane key="account" tab={'账号密码注册'} />
          </Tabs>
          {type === 'account' && (
            <>
              <ProFormText
                name="userAccount"
                fieldProps={{
                  size: 'large',
                  prefix: <UserOutlined className={styles.prefixIcon} />,
                }}
                placeholder="请输入账号"
                rules={[
                  {
                    required: true,
                    message: '账号是必填项！',
                  },
                ]}
              />
              <ProFormText.Password
                name="userPassword"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon} />,
                }}
                placeholder="请输入密码"
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                  {
                    min: 8,
                    type: 'string',
                    message: '长度不能小于 8',
                  },
                ]}
              />
              <ProFormText.Password
                name="checkPassword"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon} />,
                }}
                placeholder="请再次输入密码"
                rules={[
                  {
                    required: true,
                    message: '请再次输入密码！',
                  },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                    if (!value || getFieldValue('userPassword') === value) {
                        return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入的密码不一致！'));
                    },
                  })
                ]}
              />
               <ProFormText
                name="userEmail"
                fieldProps={{
                  size: 'large',
                  prefix: <MailOutlined className={styles.prefixIcon} />,
                  onChange:(e)=>{
                    setValueData(prevState => ({
                      ...prevState,
                      userEmail:e.target.value
                    }));
                  }
                }}
                placeholder="请输入邮箱"
                rules={[
                  {
                    required: true,
                    message: '邮箱是必填项！',
                  },
                  {
                    type: 'email',
                    message: '邮箱不合法!',
                  },
                ]}
              />
               <Form.Item >
                  <Row gutter={10}>
                    <Col flex={1}>
                      <Form.Item
                        name="emailCode"
                        rules={[{ required: true, message: '请输入验证码!' }]}
                      >
                        <Input size="large" placeholder="请输入验证码"/>
                      </Form.Item>
                    </Col>
                    <Col flex={1}>
                      <Button size="large" onClick={handleEmail}>发送验证码</Button>
                    </Col>
                  </Row>
                </Form.Item>
            </>
          )}
        </LoginForm>
      </div>
      <Footer />
    </div>
  );
};

export default Register;
